在最近幫公司做會員系統時，有用到jQuery的AJAX做提示的功能
而目前越接近完賽感覺題目越來越難找，有種彈盡援絕的感覺
在這當下，才想到我在先前自己的點部落(OS隨手筆記)有發過兩篇AJAX的文章，就讓我把它拿出來與大家分享一下吧

今天要說的是AJAX基礎入門（搭配使用PHP示範）

AJAX是「Asynchronus JavaScript and XML」的簡寫，即非同步JavaScript與XML技術。
一般的Web應用是用戶端填寫表單並送出，送出時就向伺服器傳送一個請求，而伺服器接收請求並處理傳來的表單後，再回傳一個新的頁面。
同時，每次操作都需要向伺服器傳送請求並更新頁面，這使得伺服器的負荷量增加了不少。

而使用AJAX的最大好處是不用更新頁面，向伺服器傳送出請求的資料，並取回必須的資訊。
以達到提高網頁的互動性、速度效率，也因此減少了伺服器的負荷量。
接下來，會以搭配PHP的方式做示範。

「ajax_select.html」

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="./ajax_select.js"></script>
        <title>Untitled</title>
    
    
        選項：
        <select id="select_op" onchange="check()";>
            <option  value="" selected="selected">請選擇</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <br />
        回應訊息：<div id="message"></div>
    

可以從看到當Select標籤的選項被選取時，會觸發一個JavaScript函式。

JavaScript的部分「ajax_select.js」

var xmlHTTP;

function $_xmlHttpRequest()
{   
    if(window.ActiveXObject)
    {
        xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHTTP=new XMLHttpRequest();
    }
}

function check()
{  
    var select_op=document.getElementById("select_op").value;
    
    $_xmlHttpRequest();
    xmlHTTP.open("GET","ajax_check.php?select_op="+select_op,true);
    
        xmlHTTP.onreadystatechange=function check_user()
        {
            if(xmlHTTP.readyState == 4)
            {
                if(xmlHTTP.status == 200)
                {
                    var str=xmlHTTP.responseText;
                    document.getElementById("message").innerHTML=str;
                }
            }
        }
        xmlHTTP.send(null);
    }

現今所有的瀏覽器均支援XMLHttpRequest物件（IE5、IE6僅支援ActiveXObject）

使用XMLHttpRequest物件語法：xmlHTTP=new XMLHttpRequest();
使用ActiveX物件語法：xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");

將請求傳送到伺服器，使用XMLHttpRequest物件的open()和send()方法
(此範例是用GET方法，把值傳送到ajax_check.php)
使用方法：
(可參考：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp)
open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
method：請求的類型 GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
send(string) 將請求發送到服務器。
string：僅用於 POST 請求

onreadystatechange 事件
(可參考：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp)

每當readyState 改變時，就會觸發onreadystatechange 事件。
readyState 屬性存有XMLHttpRequest 的狀態信息。
下面是XMLHttpRequest 對象的三個重要的屬性：
readyState
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且回應已就緒
status
200: "OK"
404: 未找到頁面

接著使用XMLHttpRequest物件的responseText屬性，將伺服端的字串回應值，並回傳到指定的id位置。
上述內碼也可以寫成這樣：document.getElementById("message").innerHTML=xmlHTTP.responseText;

JavaScript程式碼內，open()內url位置「ajax_check.php」

<?php    
    header("Content-Type:text/html;charset=utf-8");

    if($select_op != ""){
        $select_op=$_GET['select_op'];
        if($select_op == "1"){
            echo "你選擇到1的選項";
        }else if($select_op == "2"){
            echo "你選擇到2的選項";
        }else if($select_op == "3"){
            echo "你選擇到3的選項";
        }
    }else{
        echo "請選擇一個選項";
    }
?>

成果如下：